<template>
  <div class="info-view">
    <el-row>
      <el-form ref="form" :model="form" size="small" class="spider-form" label-width="100px">
        <el-form-item label="项目名称">
          <el-input v-model="form.name" :disabled="true" style="width: 400px;" />
        </el-form-item>
        <el-form-item label="代码类型">
          <el-select v-model="form.codeType" filterable placeholder="请选择" style="width: 400px;">
            <el-option
              v-for="item in dict.framework_type"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="项目描述">
          <el-input v-model="form.description" :disabled="true" style="width: 400px;" />
        </el-form-item>
        <el-form-item label="仓库http地址">
          <el-input v-model="form.httpUrl" :disabled="true" style="width: 400px;" />
        </el-form-item>
        <el-form-item label="仓库ssh地址">
          <el-input v-model="form.sshUrl" :disabled="true" style="width: 400px;" />
        </el-form-item>
      </el-form>
    </el-row>
    <el-row>
      <div class="button-group">
        <el-button
          size="small"
          type="primary"
          icon="el-icon-check"
          @click="doSaveServer"
        >
          保存
        </el-button>
      </div>
    </el-row>
  </div>
</template>

<script>

import { mapGetters } from 'vuex'
import { initData } from '@/api/data'
import request from '@/utils/request'

export default {
  name: 'DpServerInfo',
  components: {
  },
  dicts: ['framework_type'],
  props: {
    projectId: {
      type: Number,
      default: () => { return -1 }
    }
  },
  data() {
    return {
      form: {}
    }
  },
  computed: {
    ...mapGetters([
      'env'
    ])
  },
  watch: {
  },
  created() {
  },
  mounted() {
    initData('/api/dpServer/detail', {
      projectId: this.projectId
    }).then(data => {
      this.form = data
    }).catch(err => {
      this.$notify({
        title: '获取项目详情失败' + err,
        type: 'error',
        duration: 2500
      })
    })
  },
  methods: {
    doSaveServer() {
      var data = this.form
      request({
        url: '/api/dpServer',
        method: 'put',
        data
      }).then(this.$notify({
        title: '保存成功',
        type: 'success',
        duration: 1500
      }))
    }
  }
}
</script>

<style lang="scss" scoped>
  .spider-form {
    padding: 10px;
  }

  .button-container {
    padding: 0 10px;
    width: 100%;
    text-align: right;
  }

  .el-autocomplete {
    width: 100%;
  }

  .info-view > > > .el-upload-list {
    display: none;
  }

  .deploy-button {
    border-color: red;
    background-color: red;

  &:hover {
     background-color: darkred;
   }
  }

  .button-group {
    width: 100%;
    text-align: left;
    margin-top: 15px;
    margin-bottom: 0px;
    margin-left: 12px;
  }

  .el-divider--horizontal {
    margin: 5px;
  }
</style>
